iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 25

Day 25 AngularTri實作-台灣三鐵比賽

  • 分享至 

  • xImage
  •  

鐵人賽進行到這,要開始進行實作練習啦

參加了IT鐵人賽,小弟本人私下也會參加三鐵賽:游泳、跑步、騎車

這次來做一個台灣三鐵比賽的

前端:Angular
後端:net Core API
資料庫:MongoDB in Azure

程式目的

整理出近一年的台灣三鐵比賽,建置CRUD功能架構一個呈現與維護的程式

UI

預計設計出有二、三個查詢條件,畫面上會用Angular Material-Data table、Dialog、Card等
來呈現各種三鐵比賽的資料,過程中會再用之前幾天談到的component、service、http、route等Angular功能

API

GET

取得鐵人賽資料

  • header
    • Content-Type: 'application/json'
  • query string
    • 查詢條件都不帶可以查出全部
field type rule comment
Id String optional Mongodb ObjectId
dateS String optional 開始時間 date format->yyyy/MM/dd
dateE String optional 結束時間 date format->yyyy/MM/dd
place String optional 縣市全名

response example

{
  "isSuccess": true,
  "errorMessage":null,
  "data": [
    {
      "id": "5be0f2921b4ebb0528045146",
      "date": "2018/11/11",
      "year": "2018",
      "month": "11",
      "day": "11",
      "place": "新北市",
      "name": "LAVA TRI 鐵人三項-新北福隆站",
      "tri_event": [
        {
          "eventgroup": "51.1K",
          "name": "標鐵組",
          "startDate": "20181111",
          "startTime": "6:30 新北市福隆海水浴場",
          "cost": "3500元",
          "timelimit": "4小時10分"
        },
        {
          "eventgroup": "53K",
          "name": "鐵人兩項",
          "startDate": "20181111",
          "startTime": "6:50 龍門運動公園",
          "cost": "1900元",
          "timelimit": "3小時50分"
        },
        {
          "eventgroup": "51.1K",
          "name": "標鐵接力組",
          "startDate": "20181111",
          "startTime": "6:30 新北市福隆海水浴場",
          "cost": "5700元",
          "timelimit": "4小時10分"
        }
      ],
      "remark": "備註",
      "organizer": "台灣耐力運動協會",
      "location": "福隆海水浴場",
      "locationmap": "https://www.google.com.tw/maps/place/%E7%A6%8F%E9%9A%86%E6%B5%B7%E6%B0%B4%E6%B5%B4%E5%A0%B4",
      "applydate": "【報名日期】2018/08/10 12:00 ~ 2018/09/30 23:59",
      "onlineapplyurl": "http://bao-ming.com/eb/www/reg.php?activitysn=3182",
      "status": "已截止報名",
      "in_date": "資料新增時間",
      "up_date": "資料修改時間"
    },
    {
      "id": "5be0f3e3c2c2910a18bc6563",
      "date": "2018/11/11",
      "year": "2018",
      "month": "11",
      "day": "11",
      "place": "高雄市",
      "name": "黃埔金湯全國鐵人三項暨二項競賽",
      "tri_event": [
        {
          "eventgroup": "54K",
          "name": "標準賽個人組",
          "startDate": "20181111",
          "startTime": "6:30 新北市福隆海水浴場",
          "cost": "3500元",
          "timelimit": "4小時10分"
        }
      ],
      "remark": "備註",
      "organizer": "高雄市體育會鐵人三項委員會",
      "location": "鳳山陸軍官校",
      "locationmap": "https://www.google.com.tw/maps/place/%E7%A6%8F%E9%9A%86%E6%B5%B7%E6%B0%B4%E6%B5%B4%E5%A0%B4",
      "applydate": "【報名日期】2018/08/10 12:00 ~ 2018/09/30 23:59",
      "onlineapplyurl": "http://bao-ming.com/eb/www/reg.php?activitysn=3182",
      "status": "已截止報名",
      "in_date": "資料新增時間",
      "up_date": "資料修改時間"
    }
  ]
}

POST

新增鐵人賽資料

  • header
    • Content-Type: 'application/json'
  • body
    • 直接回傳鐵人賽的json
field type rule comment
date String optional yyyy/MM/dd
... ... ... ...

PUT

更新鐵人賽資料

  • header

    • Content-Type: 'application/json'
  • query string

    • 預更新的鐵人賽id
field type rule comment
Id String required Mongodb ObjectId
  • body
    • 修改後的json
field type rule comment
date String optional yyyy/MM/dd
... ... ... ...

DELETE

刪除鐵人賽資料

  • header

    • Content-Type: 'application/json'
  • query string

    • 預刪除的id
field type rule comment
id String required yyyy/MM/dd

response example

{
    "isSuccess": true,
    "errorMessage":null,
    "data": [...]
}

BSON資料結構in MongoDB

建置在Azure上的Azure Cosmos DB上

TriDB->Triathlon

https://ithelp.ithome.com.tw/upload/images/20181109/20105684MlHmZ3mHls.png


上一篇
Day 24 AngularTri專案-CORS
下一篇
Day 26 AngularTri 實作-Fake Data
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言